<!--


  气泡弹出框

  props:
    v-model(Boolean)                          是否展示气泡弹出层
    actions(Array(Object))                    选项列表
        [
          text:(String)                       选项文字
          icon:(String)                       文字左侧的图标，支持传入图标名称或图片链接
          disabled:(Boolean)                  是否为禁用状态
          className:(Any)                     为对应选项添加额外的类名
        ]
    placement(String)                         弹出位置
    theme(String)                             主题风格
    trigger(Boolean)                          v2.11.1	触发方式
    offset([Number, Number])                  出现位置的偏移量
    overlay(Boolean)                          是否显示遮罩层
    close-on-click-action(Boolean)            是否在点击选项后关闭
    close-on-click-outside(Boolean)           是否在点击外部元素后关闭菜单
    get-container(String || Function)         指定挂载的节点

  slot:
    default                                   自定义菜单内容
    reference                                 触发 Popover 显示的元素内容

  event:
    select                         点击选项时触发	  action: Action, index: number
    open                           打开菜单时触发	  -
    close                          关闭菜单时触发	  -
    opened                         打开菜单且动画结束后触发	  -
    closed                         关闭菜单且动画结束后触发	  -

  <qm-popover
    v-model="..."   //气泡框的显示与隐藏
    placement="..."   //气泡框弹出的位置 top top-start top-end left left-start left-end right right-start right-end bottom bottom-start bottom-end
    get-container=".ios-edges"  //气泡挂载的节点
    theme="dark"  //主题
    close-on-click-action //是否在点击选项后关闭
    close-on-click-outside  //是否在点击外部元素后关闭菜单
    overlay //是否显示遮罩层
    :actions="[
      { text: "扫一扫", icon: "static/img/stop.png" },
      { text: "收钱", icon: "static/img/stop.png" },
    ]"  // 如果传入列表，则只显示列表
    @select="..." //选中列表触发
    title="箭头有8个方向。字数字数字数字数字数两行" //气泡框类的文字
  >

    <template #reference>
      <div>触发元素</div>
    </template>

    <template #before-title>
      ...
    </template>

    <template #after-title>
      ...
    </template>

  </qm-popover>

  更多帮助请查看Vant官网：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/popover
-->

<template>
  <van-popover v-bind="$attrs" v-on="$listeners" :actions="actions" :theme="theme">
    <template v-if="actions.length === 0">
      <div class="content" :class="theme">
        <template>
          <slot name="before-title"> </slot>
        </template>

        <div class="title">
          {{ title }}
        </div>

        <template>
          <slot name="after-title"> </slot>
        </template>

        <div class="close-btn">
          <f7-icon
            f7="multiply"
            class="icon-btn"
            @click.native="closePopover"
          ></f7-icon>
        </div>
      </div>
    </template>
    <template #reference>
      <slot name="reference"> </slot>
    </template>
  </van-popover>
</template>

<script>
import { Popover } from "vant";
export default {
  inheritAttrs: true,
  components: {
    [Popover.name]: Popover,
  },
  props: {
    theme: {
      type: String,
      default: (value) => {
        if (["dark", "light"].indexOf(value) !== -1){
          return value;
        }
        return "dark"
      }
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    closePopover() {
      this.$emit("close");
      this.$emit("input", false);
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: auto;
  height: 100%;
  padding: calc(13px * var(--ratio)) calc(24px * var(--ratio));
  border-radius: 6px;
  display: flex;
  align-items: center;

  .title {
    flex: 1;
  }

  .close-btn {
    align-self: flex-start;
    margin-left: calc(30px * var(--ratio));
    .icon-btn {
      font-size: calc(36px * var(--ratio));
    }
  }
}

.dark{
  .icon-btn {
      color: #fff;
    }
}
</style>
